{extend name="sitehome@public/base" /}
{block name="resources"}
<style type="text/css">
    .order-step-region {
        margin: 0 auto 25px;
        padding-top: 15px;
        padding-bottom: 25px;
        border-bottom: 1px solid #e5e5e5;
        color: #999;
        text-align: center;
    }
    .order-step-region .step-item {
        display: inline-block;
        font-size: 12px;
        vertical-align: middle;
    }
    .order-step-region .step-line {
        display: inline-block;
        margin: 0 15px;
        color: #e5e5e5;
        vertical-align: middle;
    }
    .order-step-region .step-item.active {
        font-size: 14px;
        color: #333;
        font-weight: 700;
    }
    .layui-col-md12 p{
        text-align: right;
        color: #333;
        font-size: 13px;
    }
    .price {
        width:100px;
        display: inline-block;
        line-height: 30px;
    }
    .total-price {
        width:100px;
        display: inline-block;
    }
    .total-price-p {
        font-size: 14px!important;
        color: #f44!important;;
    }
    .layui-col-md12 .layui-btn {
        background: #f44;
    }
</style>
{/block}
{block name="main"}
<div class="order-step-region">
    <span class="step-item">1. 选择服务</span>
    <span class="step-line">- - - - -</span>
    <span class="step-item {if condition="$info['data']['status'] eq 0"}active{/if}">2. 确认订购单信息</span>
    <span class="step-line">- - - - -</span>
    <span class="step-item">3. 确认付款</span>
    <span class="step-line">- - - - -</span>
    <span class="step-item {if condition="$info['data']['status'] eq 1"}active{/if}" >4. 完成订购</span>
</div>
<label>订购服务：<span>短信充值</span></label>
<div class="layui-form">
    <table class="layui-table">
        <colgroup>
            <col width="15%">
            <col width="15%">
            <col width="15%">
            <col width="15%">
            <col width="20%">
            <col width="20%">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>订购服务</th>
            <th>单价</th>
            <th>数量</th>
            <th>创建时间</th>
            <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>短信</td>
            <td>{$info['data']['price']}</td>
            <td>{$info['data']['num']}</td>
            <td>{$info['data']['create_time']|date='Y-m-d H:i:s', ###}</td>
            <td>{$info['data']['total_price']}</td>
        </tr>
        </tbody>
    </table>
</div>
{if condition="$info['data']['status'] eq 0"}
<div class="layui-form">
    <input type="checkbox" name="" lay-skin="primary" title="我已阅读并同意" lay-filter="select">
    <a href="" class="default" style="margin-left: -15px">《短信充值协议》</a>
</div>
<br>
<div style="padding: 20px; background-color: #F2F2F2;" class="">
    <div class="layui-row layui-col-space15 layui-form">
        <div class="layui-col-md12">
           <p class="">合计：<span class="price">{$info['data']['total_price']}</span></p>
           <p class="total-price-p">应付款：<span class="total-price">{$info['data']['total_price']}</span></p>
           <br>
           <p><button class="layui-btn layui-btn-disabled" id="save" lay-submit lay-filter="noselect">立即付款</button></p>
        </div>
    </div>
</div>
{/if}
<input type="hidden" id="hidden_order_id" value="{$info['data']['id']}">
{/block}
{block name="script"}
<script type="text/javascript">
layui.use(['form'], function() {
	var form = layui.form;
	var repeat_flag = false;//防重复标识
	form.on('submit(save)', function () {
		var id = $('#hidden_order_id').val();
		if (repeat_flag) return;
		repeat_flag = true;
		$.ajax({
			url: '{:addon_url("SmsNiucloud://sitehome/index/paySmsOrder")}',
			type: 'post',
			data: {id},
			dataType: "JSON",
			success: function (res) {
				layer.msg(res.message);
				if (res.code == 0) {
					location.href = "{:addon_url('SmsNiucloud://sitehome/index/buysitesms')}";
				} else {
					repeat_flag = false;
				}
			}
		})
	});
	
	form.on('submit(noselect)', function () {
		layer.msg('请选中短信充值协议');
	});
	
	form.on('checkbox(select)', function (data) {
		if (data.elem.checked === true) {
			$('#save').attr('lay-filter', 'save').removeClass('layui-btn-disabled');
		} else {
			$('#save').attr('lay-filter', 'no-select').addClass('layui-btn-disabled');
		}
	});
});
</script>
{/block}